<template>
	<div>
		<el-row :gutter="10">
		  <el-col :xs="4" :sm="6" :md="8" :lg="4" :xl="1" v-for="(item, index) in data_statics" :key="index">
			  <div class="card">
      <el-card class="box-card">
        <div slot="header">
          <span>{{item.label}}</span>
		   <el-button style="float: right; padding: 3px 0" type="text" v-if="item.tip!=''">+{{item.tip}}</el-button>
        </div>
        <div class="content">
			<span>{{item.value}}</span>
        </div>
      </el-card>
	  </div>
	  </el-col>
	  </el-row>
	  
	<el-row :gutter="23">
	<el-card class="box-card" header="基础信息">
		
		 
	
	  <el-col :span="23" class="text-c">
	    <div class="st-gbox">
	      <div class="cavasbox" ref="charts_1"></div>
	    </div>
	  </el-col>
	  </el-card>
	</el-row>
	
	</div>
</template>
<script>
import Chart from 'echarts'
export default {
  name: 'index',
  data() {
    return {
		charts_1_date:'',
		active_date:'',
		data_statics:[
			{
				title:"总收益",
				"value":20,
				"tips":""
			},
			{
				title:"分销收益",
				"value":20,
				"tips":""
			},{
				title:"商品",
				"value":20,
				"tips":""
			},{
				title:"提现申请",
				"value":20,
				"tips":"",
				"src":""
			},{
				title:"反馈",
				"value":20,
				"tips":""
			},{
				title:"订单",
				"value":20,
				"tips":""
			},{
				title:"投诉",
				"value":20,
				"tips":""
			},{
				title:"用户",
				"value":20,
				"tips":""
			}
		
		],
		chart:'',
		option : {
		    title: {
		        text: '基础信息'
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: ['用户']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		      },
		      xAxis: {
		          type: 'category',
		          boundaryGap: false,
		          data: []
		      },
		      yAxis: {
		          type: 'value'
		      },
		      series: [
		          {
		              name: '用户',
		              type: 'line',
		              stack: '总量',
		              data: []
		          }
		      ]
		  }
    }
  },
  mounted(){
	this.get_chart()
	
	  this.get_data()
	
  },
  methods: {
	  get_chart(){
		
		  
		 /* HomeModel.get_data_chart().then(res=>{
			  console.log(res.data)
			  this.option.xAxis.data=[]
			  for(let i=0;i<res.data.length;i++){
				  this.option.xAxis.data.push(res.data[i].time)
				  this.option.series[0].data.push(res.data[i].sum)
			  }
			    this.get_chart1()
		  }) */
	  },
	  get_data(){
		  this.$model.get("/cms/common/statistics").then(res=>{
		  			  if(res.code==200){
		  				  this.data_statics=res.data.panel
		  			  }
		  })
	  },
	  
	  get_chart1() //基本信息统计图表
	  {
		this.chart=Chart.init(this.$refs.charts_1)	
		  this.chart.setOption(this.option);
	  }
  },
  created() {
    // 监听
    this.$root.Bus.$on('toggle', value => {
      if (value) {
        this.showclass = 'asideshow'
      } else {
        setTimeout(() => {
          this.showclass = 'aside'
        }, 300) 
      }
    })
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {

  }
}
</script>
<style>

.charts_box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

  .content{
	  text-align: center;
  }
  .box-card{
	  text-align: center;
  }
  
  .card{
	  padding: 5px;
  }
  
  .text-c {
    text-align: center;
  }
  
  .st-gbox {
    background-color: #fff;
    margin-top: 20px;
    border-radius: 5px;
    height: 30vh;
    box-sizing: border-box;
    padding: 10px;
  }
  .cavasbox {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
  
</style>
